import { RecommendWrapper } from "@/views/discover/c-views/recommend/c-components/hot-recommend/style";
import AreaHeaderV1 from "@/components/area-header-v1";
import { memo } from "react";
import { useAppDispatch, useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import SongMenuItem from "@/components/song-menu-item";

const HotRecommend = () => {
  const { hotRecommend } = useAppSelector(
    (state) => ({
      hotRecommend: state.recommend.hotRecommend
    }),shallowEqual
  );
  return (
    <RecommendWrapper>
      <AreaHeaderV1
        title={"热门推荐"}
        keywords={["华语", "流行", "摇滚", "民谣", "电子"]}
        moreLink={"/discover/song"}
      />
      <div className="recommend-list">
        {hotRecommend.map((item) => {
          return (
            <SongMenuItem key={item.id} itemData={item} />
            // <div className="item" key={item.id}>
            //   {item.name}
            // </div>
          )
        })}
      </div>
    </RecommendWrapper>
  );
};
export default memo(HotRecommend);
